<extend name="Home@Base/common" xmlns="http://www.w3.org/1999/html"/>
<block name="body">
    <div class="span9 page_message">
        <section id="contents"> <include file="Home@Addons/_nav" />
            <input type="hidden" value='{$get_depts}' id = 'url_get_depts' />
            <input type="hidden" value='{$get_employee}' id = 'url_get_employee' />
            <div class="tab-content">
                <php> $post_url || $post_url = U('add?model='.$model['id'], $get_param);</php>
                <form class="form-horizontal form-center" method="post" action="{$post_url}" id="form">
                    <div class="form-item cf toggle-title">
                        <input type="hidden" name="id" value="{$data.id}"/>
                        <label class="item-label"> <span class="need_flag">*</span>{$type}标题<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" value="{$data.title}" name="title" class="text" placeholder="请{$type}标题">
                        </div>
                    </div>
                    <div class="form-item cf">
                        <label class="item-label"> <span class="need_flag">*</span> 发送者/部门 </label>
                        <div class="controls">
                            <input type="text" value="{$data.from_who}" name="from_who" class="text" placeholder="请填发送者">
                        </div>
                    </div>
                    <div class="form-item cf">
                        <label class="item-label"> <span class="need_flag">*</span>{$type}内容<span class="check-tips"></span></label>
                        <label class="textarea input-large">
                            <textarea class="text input-large" name="details" >{$data.details}</textarea>
                        </label>
                    </div>

                    <div class="form-item cf">
                        <label class="item-label"> <span class="need_flag">*</span>选择目标部门/人<span class="check-tips"></span></label>
                        <input type="hidden" value='{$data.to_users}' id='sendtousers' name="to_users">
                        <div class="controls">
                            <select id="select_type" onchange="sendTypeChange()">
                                <option value="0" selected>按部门发送</option>
                                <option value="1">按人发送</option>
                            </select>
                            <select id="select_dept" onchange="sendDeptChange()" >
                                <option value="0" selected>按部门发送</option>
                                <option value="1">按人发送</option>
                            </select>
                            <select id="select_employee" type="hidden">
                                <option value="0" selected>按部门发送</option>
                                <option value="1">按人发送</option>
                            </select>
                            <input type="button" class="btn" onclick="addusers()" value="添加" />
                            <input type="button" class="btn" onclick="delusers()" value="删除" />
                            <input type="button" class="btn" onclick="clearalluser()" value="清空" />
                        </div>
                    </div>
                    <div class="form-item cf">
                        <label class="item-label"> <span class="need_flag">*</span>发送给：<span class="check-tips"></span></label>
                        <label class="textarea input-large">
                            <textarea class="text input-large" style="border:1px dashed" id="sendToUserText" disabled >{$data.receivers}</textarea>
                        </label>
                    </div>
                    <input type="hidden" id="filesIds" name='fileids' value='{$data.fileids}' />
                    <div class="form-item cf">
                        <label class="item-label"><span class="need_flag">*</span>文件上传<span class="check-tips">支持文件格式doc,docx,ppt,pptx,xls,xlsx</span></label>
                        <div class="controls upload_file">
                            <div id="upload_file_files" class="uploadrow_file" ></div>
                            <input type="hidden" name="files" value=""/>
                            <div class="upload-img-box" id="files_box"></div>
                        </div>
                    </div>
                    <div class="form-item cf">
                        <div class="check-item">
                            <input type="checkbox" checked="checked"  id="sendMsg" name="sendMsg" />
                            <label>发送小程序消息</label>
                        </div>
                    </div>
                    <div class="form-item form_bh">
                        <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">发 起</button>
                    </div>
                </form>
            </div>
        </section>
    </div>
</block>

<block name="script">
    <link href="__STATIC__/emoji.css" rel="stylesheet">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        var g_depts = [];
        var g_emps = [];
        var g_touser = {
            depts: [],
            employees: []
        };
        var sel_empStr = [];
        var filesInfo = [];
        var fileUploader = null;
        var fileObjs = [];

        $(function(){
            showTab();
            initial_selects();
            fileUploader = initUploadFileWithRemove(fileUploadSuccess)[0];
            init_file_uplaod();
        });
        function initial_selects () {
            g_depts = [];
            g_emps = [];
            sel_empStr = [];
            get_depts(0);
            $("#select_employee").hide();
            if ($('#sendtousers').val() !== '') {
                g_touser = JSON.parse($('#sendtousers').val())
            }
            if ($('#sendToUserText').val() !== '') {
                sel_empStr = $('#sendToUserText').val().split(';')
            }
        }
        function get_depts (sel_type) {
            var href = $('#url_get_depts').val();
            $.get(href,
                function(detps){
                    console.log(detps);
                    console.log(detps.length);
                    g_depts = [];
                    $('#select_dept').contents().remove();
                    if (sel_type == 0) {
                        $("<option value = '0:all' selected> 全关所有部门</option>").appendTo('#select_dept');
                        g_depts.push('0:all');
                    }
                    for(var i = 0 ;i < detps.length;i++)
                    {
                        var tmpValue = detps[i].id+':'+detps[i]['name'];
                        g_depts.push(tmpValue);
                        if((sel_type == 1) && (i == 0)){
                            $("<option value='" + tmpValue + "' selected>" + detps[i]['name'] + "</option>").appendTo('#select_dept');
                        }else {
                            $("<option value='" + tmpValue + "'>" + detps[i]['name'] + "</option>").appendTo('#select_dept');
                        }
                    }
                    if (sel_type == 1){
                        sendDeptChange();
                    }
                });
        }
        function get_all_employeeInDetp (deptId)  {
            var href = $('#url_get_employee').val()+'&dept_id='+deptId;
            console.log(href);
            $.get(href,
                function(employees){
                    console.log(employees);
                    console.log(employees.length);
                    g_emps = [];
                    $('#select_employee').contents().remove();
                    $("<option value = '0:all'> 部门内所有员工</option>").appendTo('#select_employee');
                    g_emps.push('0:all');
                    for(var i =0 ;i < employees.length;i++)
                    {
                        var tmpValue = employees[i].id+':'+employees[i]['name'];
                        g_emps.push(tmpValue);
                        $("<option value='" +tmpValue +"'>" + employees[i]['name'] + "</option>").appendTo('#select_employee');
                    }
                });
        }
        function sendTypeChange() {
            console.log('sendTypeChange:' + $('#select_type').val());
            var sel_type = $('#select_type').val();
            get_depts(sel_type);
            if (sel_type == 0){
                $("#select_employee").hide();
            } else {
                $("#select_employee").show();
            }
        }
        function sendDeptChange() {
            console.log('sendDeptChange:'+$('#select_dept').val())
            var detpId = $('#select_dept').val().split(':')[0];
            get_all_employeeInDetp(detpId);
        }
        function addusers () {
            var sel_type = $('#select_type').val();
            if (sel_type == 0) {
                var tmpData = $('#select_dept').val().split(':');
                var deptId = tmpData[0];
                if (deptId == 0) {
                    for(var i = 1; i < g_depts.length; i++){
                        var tmpDept = g_depts[i].split(':');
                        if(g_touser.depts.indexOf(tmpDept[0]) == -1) {
                            g_touser.depts.push(tmpDept[0]);
                            sel_empStr.push(tmpDept[1]);
                        }
                    }
                } else {
                    if(g_touser.depts.indexOf(deptId) == -1) {
                        g_touser.depts.push(deptId);
                        sel_empStr.push(tmpData[1]);
                    }
                }
            }else{
                var tmpData = $('#select_employee').val().split(':')
                var empId = tmpData[0];
                if (empId == 0) {
                    for(var i = 1; i < g_emps.length; i++) {
                        var tmpEmp = g_emps[i].split(':')
                        if (g_touser.employees.indexOf(tmpEmp[0]) == -1) {
                            g_touser.employees.push(tmpEmp[0]);
                            sel_empStr.push(tmpEmp[1]);
                        }
                    }
                }else {
                    if(g_touser.employees.indexOf(empId) == -1) {
                        g_touser.employees.push(empId);
                        sel_empStr.push(tmpData[1]);
                    }
                }
            }
            $('#sendToUserText').val(sel_empStr.join(';'))
            var str_users = JSON.stringify(g_touser);
            $('#sendtousers').val(str_users)
        }
        function delusers() {
            var sel_type = $('#select_type').val();
            if (sel_type == 0) {
                var tmpData = $('#select_dept').val().split(':')
                var deptId = tmpData[0];
                var dept_index = g_touser.depts.indexOf(deptId);
                if(dept_index > -1) {
                    g_touser.depts.splice(dept_index,1);
                    var deptStr_index = sel_empStr.indexOf(tmpData[1]);
                    if (deptStr_index > -1) {
                        sel_empStr.splice(deptStr_index,1);
                    }
                }
            }else{
                var tmpData = $('#select_employee').val().split(':')
                var empId = tmpData[0];
                var emp_index = g_touser.employees.indexOf(empId);
                if(emp_index > -1) {
                    g_touser.employees.splice(emp_index,1);
                    var empStr_index = sel_empStr.indexOf(tmpData[1]);
                    if (empStr_index > -1) {
                        sel_empStr.splice(empStr_index,1);
                    }
                }
            }
            $('#sendToUserText').val(sel_empStr.join(';'))
            var str_users = JSON.stringify(g_touser);
            $('#sendtousers').val(str_users)
        }
        function clearalluser() {
            g_touser.depts.splice(0,g_touser.depts.length);
            g_touser.employees.splice(0,g_touser.employees.length);
            sel_empStr.splice(0,sel_empStr.length);
            $('#sendToUserText').val('')
            $('#sendtousers').val('')
        }

        // upload files
        //上传附件组件
        function init_file_uplaod () {
            var tmp = $('#filesIds').val();
            if (tmp != ''){
                filesInfo = JSON.parse(tmp);
            }

            var box_html = "<div class=\"upload-pre-file\">";
            console.log(filesInfo.length);
            for (let i = 0; i < filesInfo.length; i++) {
                console.log(filesInfo[i]);
                box_html += "<span class=\"upload_icon_all\"></span>" + filesInfo[i].name;
                box_html += "<span class=\"emoji emoji274c\" onclick=\"delFile(" + i +")\"></span>";
            }
            box_html += "</div>"
            document.getElementById('files_box').innerHTML = box_html;
        }
        function fileUploadSuccess(file,data, name){
            if(data.status){
                filesInfo.push({
                    id: data.id,
                    name: data.name
                })
                fileObjs.push(file);
                var tmp = JSON.stringify(filesInfo);
                $('#filesIds').val(tmp);

                var box_html = "<div class=\"upload-pre-file\">";
                console.log(filesInfo);
                for (let i = 0; i < filesInfo.length; i++) {
                    box_html += "<span class=\"upload_icon_all\"></span>" + filesInfo[i].name;
                    box_html += "<span class=\"emoji emoji274c\" onclick=\"delFile(" + i + ")\"></span>";
                }
                box_html += "</div>"

                $("input[name="+name+"]").parent().find('.upload-img-box').html(box_html);
            }
        }
        function delFile (index) {
            console.log('delFile');
            fileUploader.removeFile(fileObjs[index]);
            fileObjs.splice(index,1);
            filesInfo.splice(index,1);
            var tmp = JSON.stringify(filesInfo);
            $('#filesIds').val(tmp);
            document.getElementById('files_box').innerHTML = '';
            var box_html = "<div class=\"upload-pre-file\">";
            console.log(filesInfo.length);
            for (let i = 0; i < filesInfo.length; i++) {
                console.log(filesInfo[i]);
                box_html += "<span class=\"upload_icon_all\"></span>" + filesInfo[i].name;
                box_html += "<span class=\"emoji emoji274c\" onclick=\"delFile(" + i +")\"></span>";
            }
            box_html += "</div>"
            console.log(box_html);
            document.getElementById('files_box').innerHTML = box_html;
        }
    </script>
</block>